<!--
 * @Author: 胡海
 * @Date: 2020-11-22 16:57:38
 * @LastEditors: 胡海
 * @LastEditTime: 2020-11-22 17:02:09
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
    <script src="../vue/src/vue.js"></script>
</head>
<body>
    <div id="app" v-cloak>
        <button v-on:click="fn">测试事件</button>
        <a @click.prevent="prevent" href="http://www.miaov.com">miaov</a>
        <a @click.prevent href="http://www.miaov.com">miaov</a>
        
        <div @click.capture="demo1">
            demo1
            <div @click.self="demo2">
                demo2
                <!-- <div @click.stop.once="demo3">demo3</div> -->
                <div @click="demo3">demo3</div>
            </div>
        </div>
        <input type="text" @keyup.enter="uphandle" />
        <input type="text" @keyup.13="uphandle" />
        <input type="text" @keyup.65="uphandle" />
    </div>

    <script>
        /*
            事件修饰符
                方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节

                @事件名.修饰符.修饰符 = ''

                语法：v-on:事件名.修饰符=”事件处理函数”
                    .stop、.prevent、.capture、.self、.once
                按键修饰符.enter、.tab、.delete 、.esc、.space、.up、.down、.left、.right

        */
        var message = 'hello'

        var vm = new Vue({
            el: '#app',
            data:{
                message
            },
            methods: {
                fn(){
                    alert(1)
                },
                prevent(ev){

                    //ev.preventDefault();
                },
                demo1(){
                    console.log('demo1');
                },
                demo2(){
                    console.log('demo2');
                },
                demo3(){
                    console.log('demo3');
                },
                uphandle(ev){

                    console.log(ev.keyCode);
                }
            }
        })

    </script>
</body>
</html>